<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script src="https://cn.vuejs.org/js/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div style="margin-top: 20px" id="person">
    <span th:text="${session.user.getUser_id()}" hidden="hidden" id="user_id_span"></span>
    <div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">我的名字</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="起个响亮的名字" autocomplete="off"
                       class="layui-input" v-model="user_name">
            </div>
        </div>
        <br>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">我的邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="登录的唯一方法" autocomplete="off"
                       class="layui-input" v-model="user_email" th:value="${session.user.getUser_email()}">
            </div>
        </div>
        <br>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">我的密码</label>
            <div class="layui-input-block">
                <input type="password" name="title" required lay-verify="required" placeholder="在此可以修改你的密码" autocomplete="off"
                       class="layui-input" v-model="user_pwd" th:value="${session.user.getUser_pwd()}">
            </div>
        </div>
        <br>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">我的地址</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="淘到的宝贝该送往哪里呢" autocomplete="off"
                       class="layui-input" v-model="user_address">
            </div>
        </div>
        <br>
        <div style="float: left">
            <div class=" layui-inline" style="margin-left: 40px">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">我的头像</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
                        <p id="demoText"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
                <a name="list-progress"> </a>
            </div>
        </div>
        <div>
            <div class=" layui-inline" style="margin-left: 40px">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="wechat">我的微信</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="wechat_img" style="width: 100px;height: 100px">
                        <p id="wechat_Text"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="chat">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
                <a name="list-progress"> </a>
            </div>
        </div>

        <div style="margin-top: 10px;">

        </div>
        <div class="layui-form-item layui-inline" style="margin-left: 40px">
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo" @click="ok()">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layer.msg('想修改什么就填什么好了~')

    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        // 上传头像
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/userImgUpload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code === 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                layer.msg('上传成功');
                console.log(res.user_img);
                app.user_img=res.user_img;
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });



        //上传微信图片
        var uploadInst = upload.render({
            elem: '#wechat'
            , url: '/userChatUpload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#wechat_img').attr('src', result); //图片链接（base64）
                });
                element.progress('chat', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code === 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                layer.msg('上传成功');
                console.log(res.user_chat_img);
                app.user_weChat=res.user_chat_img;
                $('#wechat_Text').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#wechat_Text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('chat', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

    var app=new Vue({
        el:"#person",
        data:{
            user_id:"",
            user_name:"",
            user_email:"",
            user_pwd:"",
            user_address: "",
            user_img:"",
            user_weChat:"",
        },
        methods:{
            ok:function () {
                this.user_id=document.getElementById("user_id_span").innerText;
                if(this.user_name===""&&this.user_email===""&&this.user_pwd===""&&this.user_address===""&&this.user_img===""&&this.user_weChat===""){
                    layer.alert('好歹您也填一个吧?', {
                        skin: 'layui-layer-molv' //样式类名
                        ,closeBtn: 0
                    })
                }else {
                    var params=new URLSearchParams();
                    params.append('user_id',this.user_id);
                    params.append('user_name',this.user_name);
                    params.append('user_email',this.user_email);
                    params.append('user_pwd',this.user_pwd);
                    params.append('user_address',this.user_address);
                    params.append('user_img',this.user_img);
                    params.append('user_chat',this.user_weChat);
                    axios.post("/userPerson",params
                    ).then(function (response) {
                        if(response.data===true){
                            layer.msg("个人信息修改成功");
                            //获取当前窗口的name,关闭当前弹出层刷新父页面
                            var index=parent.layer.getFrameIndex(window.name);
                            parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                            parent.layer.close(index); //再执行关闭
                        }
                    },function (err) {
                        console.log(err);
                    })
                }
                // var params=new URLSearchParams();
                // params.append('user_id',this.user_id);
                // params.append('user_name',this.user_name);
                // params.append('user_email',this.user_email);
                // params.append('user_pwd',this.user_pwd);
                // params.append('user_address',this.user_address);
                // params.append('user_img',this.user_img);
                // params.append('user_chat',this.user_weChat);
                // axios.post("/userPerson",params
                // ).then(function (response) {
                //     if(response.data===true){
                //         layer.msg("个人信息修改成功");
                //         //获取当前窗口的name,关闭当前弹出层刷新父页面
                //         var index=parent.layer.getFrameIndex(window.name);
                //         parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                //         parent.layer.close(index); //再执行关闭
                //     }
                // },function (err) {
                //     console.log(err);
                // })
            }
        }
    });




</script>
</html>